<include file="public/header" />
<!--当前页面私有样式-->
<style>
  .tab {
    background-color: #ccc;
    padding: 5px 10px;
  }

  .active {
    display: block !important; /* 设置初始状态为显示 */
  }

  .tab-content {
    display: none; /* 隐藏其他选项卡内容 */
    float: left;
  }
</style>
<link href="/html/static/css/product_list.css" rel="stylesheet">
<script type="text/javascript" src="/html/static/js/iscroll.js"></script>
<script type="text/javascript" src="/html/static/js/navbarscroll.js"></script>
<div id="mainMenuBarAnchor"></div>
<div class="header_top" id="mainMenuBar">
  <div class="public_back">
    <a class="back"></a>
    <h2 class="title">食品饮料</h2>
    <a class="search"></a>
  </div>
  <div class="wrapper wrapper01" id="retr">
    <div class="scroller">
      <ul class="clearfix">
       <li><a onclick="showcontent()" class="active">全部</a></li>
        <foreach name="cate_list" item="vo">
          <li><a href="#tab_{$vo.id}" class="tab-link">{$vo['name']}</a></li>
        </foreach>
      </ul>
    </div>
  </div>
  <script type="text/javascript">
    $(function(){
      $('.wrapper').navbarscroll();
    });
  </script>
</div>
<script type="text/javascript">
  $(document).ready(function() {
    var $window = $(window),$mainMenuBar = $('#mainMenuBar'),$mainMenuBarAnchor = $('#mainMenuBarAnchor');
    $window.scroll(function() {
      var window_top = $window.scrollTop();
      var div_top = $mainMenuBarAnchor.offset().top;
      if (window_top > div_top) {
        $mainMenuBar.addClass('stick');
        $mainMenuBarAnchor.height($mainMenuBar.outerHeight());
      } else {
        $mainMenuBar.removeClass('stick');
        $mainMenuBarAnchor.height(0);
      }
    });
  });
</script>

<div class="list" id="shows">

  <foreach name="$goods" item="vo">
    <span id="tab_{$vo['id']}" class="tab-content" >
<!--        <notempty name="$vo['getGoods']">-->
             <foreach name="$vo.getGoods" item="vv">
                <a href="{:url('goods/detail',array('goods_id'=>$vv.id))}" class="item tab-content ">
              <div class="pic">
                <img src="{$vv.thumb}" />
              </div>
              <div class="content">
                <h3 class="title">
                  <span class="tab">自营</span>
                  {$vv.name}
                </h3>
                <if condition="$vv['recommend'] eq 1">
                  <p class="te">新品</p>
                </if>

                <p class="price">
                  <strong style="font-size: 14px;">￥{$vv.price}</strong>
                  <span>￥{$vv.discount_price}</span>
                </p>
              </div>
                   </a>
              </foreach>

<!--        </notempty>-->
        </span>
  </foreach>

</div>

<div class="list" id="show">

  <foreach name="$goods" item="vo">

<!--        <notempty name="$vo['getGoods']">-->
              <foreach name="$vo.getGoods" item="vv">
                <a href="{:url('goods/detail',array('goods_id'=>$vv.id))}" class="item tab-content ">
              <div class="pic">
                <img src="{$vv.thumb}" />
              </div>
              <div class="content">
                <h3 class="title">
                  <span class="tab">自营</span>
                  {$vv.name}
                </h3>
                <if condition="$vv['recommend'] eq 1">
                  <p class="te">新品</p>
                </if>

                <p class="price">
                  <strong style="font-size: 14px;">￥{$vv.price}</strong>
                  <span>￥{$vv.discount_price}</span>
                </p>
              </div>
                </a>
              </foreach>

<!--        </notempty>-->
        </span>
  </foreach>

</div>

<script type="text/javascript">
  $(window).scroll(function(event){
    var wScrollY = window.scrollY; // 当前滚动条位置  
    var wInnerH = window.innerHeight; // 设备窗口的高度（不会变）  
    var bScrollH = document.body.scrollHeight; // 滚动条总高度      
    if (wScrollY + wInnerH >= bScrollH) {
      console.log('加载')
    }
  });
</script>
<script>
  $(document).ready(function() {

    $('.tab-link').click(function(e) {
      $('#show').hide();
      $('#shows').show();
      e.preventDefault(); // Prevent the default link behavior
      var target = $(this).attr('href'); // Get the target tab's ID
      $('.tab-link').removeClass('active'); // Remove active class from all tabs
      $(this).addClass('active'); // Add active class to the clicked tab
      $('.tab-content').removeClass('active'); // Remove active class from all tab contents
      $(target).addClass('active'); // Add active class to the corresponding tab content
    });
  });


  function showcontent(){
    $('#shows').hide();
    $('#show').show();
  }

</script>

</body>
</html>
